<template>
    <div class="page-home">
        <com-search></com-search>
        <com-navbar :data-source="dataSource" @navBarClick="getFilterList"></com-navbar>
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd" v-for="(item, index) in getList">
                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" :data-id="item.goodsId" @click="gotoDetail">
                    <div class="weui-media-box__hd">
                        <img :src="item.goodsImg" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">{{item.name}}</h4>
                        <p class="weui-media-box__desc">
                            <span style="color: #e22">￥{{item.price}} </span>
                            <span>{{item.inventory}}份</span>
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <com-footer></com-footer>
    </div>
</template>
<script>
   import comSearch from '../components/search'
   import comFooter from '../components/footer'
   import comNavbar from '../components/navbar'
   export default {
       data(){
           return {
               home: "首页",
               dataSource: [
                   {
                       type: 1,
                       title: "综合"
                   },
                   {
                       type: 2,
                       title: "销量"
                   },
                   {
                       type: 3,
                       title: "价格"
                   }
               ]
           }
       },
       computed: {
           getList(){
               return this.$store.getters.getList.list
           }
       },
       methods: {
           gotoDetail(e){
               var id = e.currentTarget.getAttribute("data-id");

               this.$router.push({
                   path: `/detail/${id}`
               })
           },
           getFilterList(){
              this.$store.dispatch('getList', {type: arguments[0].target.getAttribute("data-type")})
           }
       },
       created(){
           this.$store.dispatch('getList')
       },
       components: {
           comFooter,
           comSearch,
           comNavbar
       }
   }
</script>
<style lang="sass">
    .page-home .weui-panel__bd img {
        max-width: 100%;
        height: 3rem
    }
</style>